/**
 * Created by ClearLiang on 2019/4/23
 * Function:
 * Desc:
 */
import React, {Component} from 'react';
import {StyleSheet, Text, View, FlatList, ScrollView,TouchableWithoutFeedback,DeviceEventEmitter} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default class TabScreen extends Component {

    // 初始化state
    constructor(props){
        super(props);
        this.state = {
            tabList: this.props.data,
            selectNo:1,
        };
    }

    _onSelect(itemData){

        this.setState({
            selectNo:itemData.id,
        });
        this.props.fatherRef.scrollTo({x: 0, y: this.props.height, animated: true});
        this.refs._flatList.scrollToIndex({viewPosition: 0.5, index: itemData.id-1}); //viewPosition 0位于顶
        //alert(itemData.name);
    }

    // 返回单个
    renderRow(rowData){
        let item1,item2;
        if(this.state.selectNo === rowData.item.id){
            item1 = (
                <Text numberOfLines={1} ellipsizeMode={'tail'} style={{color: '#FF8F03', fontSize: 15}}>{rowData.item.name}</Text>);
            item2 = (
                <LinearGradient
                    start={{x: 0, y: 0}}
                    end={{x: 1, y: 0}}
                    colors={['#FF8F03', '#FF5301']}
                    style={{paddingHorizontal: 5, borderRadius: 10}}>
                    <Text
                        numberOfLines={1}
                        ellipsizeMode={'tail'}
                        style={{color: '#ffffff', fontSize: 12,}}>{rowData.item.tap}</Text>
                </LinearGradient>
            );
        }else {
            item1 = (
                <Text numberOfLines={1} ellipsizeMode={'tail'} style={{color: '#000000', fontSize: 15}}>{rowData.item.name}</Text>);
            item2 = (
                <LinearGradient
                    start={{x: 0, y: 0}}
                    end={{x: 1, y: 0}}
                    colors={['#f2f2f2', '#f2f2f2']}
                    style={{paddingHorizontal: 5, borderRadius: 10}}>
                    <Text
                        numberOfLines={1}
                        ellipsizeMode={'tail'}
                        style={{color: 'gray', fontSize: 12,}}>{rowData.item.tap}</Text>
                </LinearGradient>
            );
        }

        return (
            <View style={{width: (Config.deviceWidth - 5 - 10 * 5) / 5}}>
                <TouchableWithoutFeedback
                    style={{flex: 1, flexDirection: 'column'}}
                    onPress={this._onSelect.bind(this,rowData.item)}
                >
                    <View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>

                        <View style={{marginBottom: 3}}>{item1}</View>
                        <View style={{}}>{item2}</View>

                    </View>
                </TouchableWithoutFeedback>
            </View>
        );
    }

    // 加载后
    componentDidMount(): void {
        console.log('componentDidMount')
    }

    render() {

        return (
            <View style={[styles.root, styles.flex, {flexDirection: 'column'}]}>
                <View style={[styles.head,{height:50}]}>
                    <View style={[styles.flex, styles.row]}>
                        <FlatList
                            ref={'_flatList'}
                            showsHorizontalScrollIndicator={false}
                            horizontal={true}
                            ItemSeparatorComponent={()=>{
                                return <View style={{width:1,backgroundColor: '#c8c8c8',marginHorizontal: 5,marginVertical:8}} />
                            }}
                            keyExtractor={(item, index) => index}
                            renderItem={this.renderRow.bind(this)}
                            data={this.state.tabList}
                        />
                    </View>
                </View>

                <ScrollView style={[styles.flex,styles.body]}>
                    <View style={[{flex:1,flexDirection:'column'},styles.center]}>
                        {/*<Text>{this.state.tabList[this.state.selectNo-1].des}</Text>*/}
                        {this.props.children}
                    </View>
                </ScrollView>

            </View>
        );
    }
}

// 构建样式
const styles = StyleSheet.create({
    root: {},
    head: {
        backgroundColor: '#f2f2f2',
    },
    body: {
        backgroundColor: 'white',
    },
    tab: {},
    flex: {
        flex: 1,
    },
    row: {
        flexDirection: 'row',
    },
    center: {
        alignItems: 'center',
        justifyContent: 'center',
    },
});

